import React from 'react'
import {Layout,Menu} from 'antd'
import {HomeOutlined,FileSyncOutlined} from '@ant-design/icons';
import {useNavigate} from 'react-router-dom'
import routes from '../config/router';
const {Sider}=Layout
export default function MySider() {
  const nav=useNavigate()
  const go=({key})=>{
    nav(key)
  }
  const renderMenu=(routes)=>{
    //从localStorage中获取userInfo信息
    let userInfo=JSON.parse(localStorage.getItem("userInfo"))
    //过滤routes
    return routes.filter(item=>!item.roles||item.roles.includes(userInfo.role.name)).map((item,index)=>{
      const {key,icon,title,subMenuKey,subMenuTitle,children}=item
      if(!subMenuKey){
        return <Menu.Item key={key} icon={icon}>{title}</Menu.Item>
      }else{
        return <Menu.SubMenu key={subMenuKey} icon={icon} title={subMenuTitle}>
           {renderMenu(children)}
        </Menu.SubMenu>
      }
    })

  }
  return (
    <Sider className='siderBox'>
        <Menu 
            theme='dark' 
            mode='inline'
            defaultOpenKeys={['sub1','sub2']}
            defaultSelectedKeys={['/home']}
            onClick={go}>
            {renderMenu(routes)}
        </Menu>
    </Sider>
  )
}
